<!doctype html>

<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
  <script src="../../web-component-tester/browser.js"></script>
  <link rel="import" href="../../test-fixture/test-fixture.html">

  <link rel="import" href="helpers.html">
  <link rel="import" href="../vaadin-grid.html">

  <style>
    vaadin-grid {
      height: 200px;
      width: 200px;
    }
  </style>
</head>

<body>

  <test-fixture id="trivialGrid">
    <template>
      <vaadin-grid hidden size="1">
        <vaadin-grid-column>
          <template class="header">foo</template>
          <template>[[index]]</template>
        </vaadin-grid-column>
      </vaadin-grid>
    </template>
  </test-fixture>

  <script>
    describe('hidden grid', () => {
      let grid;

      beforeEach(() => {
        grid = fixture('trivialGrid');
        grid.dataProvider = infiniteDataProvider;
        flushGrid(grid);
      });

      it('should be hidden', () => {
        expect(grid.offsetWidth).to.equal(0);
        expect(grid.offsetHeight).to.equal(0);
      });

      describe('revealed', done => {

        beforeEach(done => {
          listenOnce(grid, 'animationend', () => flush(done));
          grid.removeAttribute('hidden');
        });

        it('should have content on appear', () => {
          expect(grid.isAttached).to.be.true;
          expect(getBodyCellContent(grid, 0, 0).textContent).to.equal('0');
        });

        it('should measure header on appear', () => {
          const contentRect = getBodyCellContent(grid, 0, 0).getBoundingClientRect();
          const headerRect = grid.$.header.getBoundingClientRect();
        });

      });

    });
  </script>

</body>

</html>
